<script setup lang="ts">
// 定义传感器数据项接口
interface SensorDataItem {
  label: string;
  value: number | string | null;
}

// 定义组件属性
const props = defineProps({
  // 传感器数据
  sensorData: {
    type: Array as () => SensorDataItem[],
    required: true
  }
})

// 跳转到氚云系统
const goToH3Yun = () => {
  window.open('https://www.h3yun.com/application/D001729axy20rsfk5k9fndomy/D288422SensorEventData')
}
</script>

<template>
  <div v-if="sensorData.length > 0" class="sensor-data">
    <div class="sensor-type" @click="goToH3Yun">传感器数据</div>
    <div @click="goToH3Yun" v-for="(valItem, sIdx) in sensorData" :key="sIdx" class="sensor-item">
      <span>{{ valItem.label }}：</span>
      <span class="sensor-value">{{ valItem.value ? Number(valItem.value).toFixed(2) : '-' }}</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.sensor-data {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  padding: 8px;
  width: 100%;

  .sensor-type {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 3px;
    background: rgba(10, 120, 200, 0.8);
    padding: 2px 4px;
    border-radius: 2px;
  }

  .sensor-item {
    color: #fff;
    font-size: 12px;
    margin-bottom: 2px;
    padding: 0 4px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    &:last-child {
      margin-bottom: 0;
    }

    .sensor-value {
      color: #00ffcc;
      font-weight: bold;
    }
  }
}
</style> 